<template>
  <view>
    <s-layout title="首页" navbar="111" tabbar="/pages/index/index" :navbarStyle="template.style?.navbar"
              onShareAppMessage :bgStyle="{ backgroundColor: '#fff' }">

      <!-- 搜索框和定位 -->
      <view class="search-box">
        <view class="search-container">
          <view class="left-section" style="width: 90%;">
            <view class="location-wrapper" @click="handleLocationClick">
              <uni-icons type="location" size="24" color="#FF6B06"></uni-icons>
              <text class="location-text">{{ currentLocation }}</text>
              <uni-icons type="arrow-down" size="16" color="#666"></uni-icons>
            </view>
            <span>|</span>
            <view class="search-input-wrapper">
              <s-search-block :placeholder="'搜索关键字'" :radius="20" width="100%" elBackground="#fff"
                              @click="sheep.$router.go('/pages/index/search')"></s-search-block>
            </view>
          </view>
          <view class="right-section" style="width: 10%;">
            <view class="service-icon">
              <button class="ss-reset-button" open-type="contact" bindcontact="handleContact">
                <uni-icons type="headphones" size="24" color="white" class="service-icon"></uni-icons>
              </button>
            </view>
          </view>
        </view>
      </view>

      <view class="banner-content-box" v-if="bannerlist1.length > 0">
        <swiper class="swiper-content" style="height: 620rpx" :indicator-dots="true" :autoplay="true">
          <swiper-item v-for="(it, idx) in bannerlist1" style="height: 620rpx" :key="idx"
                       @click="goindexlist(it)">
            <image style="width: 100%; height: 620rpx" :src="it.banner" class="img"/>
          </swiper-item>
        </swiper>
      </view>

      <!-- 分类 -->
      <view class="category-section">
        <swiper style="height: 400rpx" :indicator-dots="true" :autoplay="false">
          <swiper-item v-for="(page, pageIndex) in paginatedCategories" :key="pageIndex">
            <view class="category-content max-item">
              <view class="category-item" v-for="(it, idx) in page" :key="idx" @tap="toGoodsInfo(it)">
                <image :src="it.icon" class="ct-icon" style="width: 82rpx; height: 82rpx;"/>
                <view class="ct-text">{{ it.name }}</view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 餐饮分类 -->
<!--      <view class="catering-section">-->
<!--        <swiper :style="{height: cateringSwiperHeight}" :indicator-dots="true" :autoplay="false">-->
<!--          <swiper-item v-for="(page, pageIndex) in paginatedCaterings" :key="pageIndex">-->
<!--            <view style="background-color: #ffffff" class="catering-content max-item">-->
<!--              <view class="catering-item" v-for="(it, idx) in page" :key="idx" @tap="toCateringInfo(it)">-->
<!--                <image :src="it.logo" class="ct-icon" style="width: 100rpx; height: 100rpx;"/>-->
<!--              </view>-->
<!--            </view>-->
<!--          </swiper-item>-->
<!--        </swiper>-->
<!--      </view>-->

      <!-- 服务保障模块 -->
      <view class="service-guarantee">
      </view>

      <view style="box-sizing: border-box; padding: 10rpx 24rpx" v-if="bannerlist2.length > 0">
        <img style="width: 100%; height: 240rpx" :src="bannerlist2[0].secondBanner" alt=""
             @click="goindexlist(bannerlist2[0])"/>
      </view>

      <!-- 到店点餐模块 -->
      <view class="dining-section">
        <view class="section-header">
          <view class="header-title">
            <text class="title-icon">🍽️</text>
            <text class="title-text">到店点餐</text>
          </view>
        </view>
        <swiper 
          class="dining-swiper"
          :indicator-dots="false"
          :autoplay="false"
          :circular="true"
          :current="currentDiningIndex"
          @change="onDiningSwiperChange"
          previous-margin="295rpx"
          next-margin="295rpx">
          <swiper-item 
            v-for="(item, index) in restaurantList" 
            :key="index"
            class="dining-swiper-item">
            <view 
              class="dining-card"
              :style="{ backgroundColor: item.bgColor }"
              :class="{ 'active': index === currentDiningIndex }"
              @click="goRestaurantDetail(item)">
              <view class="logo-wrapper">
                <image :src="item.logo" class="logo-image" mode="aspectFit"/>
              </view>
              <text class="card-name">{{ item.name }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 秒杀模块 -->
      <view class="msbox">
        <view class="msitem">
          <view class="msleft">下单送好礼</view>
          <img v-if="bannerlist3.length > 0" style="width: 100%; height: 100%" :src="bannerlist3[0].banner"
               alt="" @click="goindexlist(bannerlist3[0])"/>
        </view>

        <view class="msitem2">
          <view class="msright">
            <img v-if="bannerlist4.length > 0" style="width: 100%; height: 100%"
                 :src="bannerlist4[0].banner" alt="" @click="goindexlist(bannerlist4[0])"/>
          </view>
          <view class="msright">
            <img v-if="bannerlist5.length > 0" style="width: 100%; height: 100%"
                 :src="bannerlist5[0].banner" @click="goindexlist(bannerlist5[0])" alt=""/>
          </view>
        </view>
      </view>

      <!-- 人气推荐 -->
      <view class="popularbox">
        <!-- 标题区域 -->
        <view class="popular-header">
          <img v-if="bannerlist6.length > 0" style="width: 800rpx; height: 400rpx"
               :src="bannerlist6[0].banner" alt="" @click="goindexlist(bannerlist6[0])"/>
        </view>
        <!-- 内容区域 -->
        <scroll-view v-if="
					bannerlist6.length > 0 &&
					bannerlist6[0].productList &&
					bannerlist6[0].productList.length > 0
				" class="popular-content scroll-view_H" scroll-x="true" show-scrollbar="false">
          <view class="product-item" v-for="(item, index) in bannerlist6[0].productList" :key="index"
                @click="gogoods1(item)">
            <image v-if="item.pic" :src="item.pic" class="product-image" mode="aspectFill"/>
            <view class="product-name">{{ item.name }}</view>
            <view v-if="item.price" class="product-price">¥{{ item.price }}</view>
          </view>
        </scroll-view>
      </view>

      <!-- 夏日狂欢购 -->
      <view class="summerbox">
      </view>
      <!-- 夏日狂欢购img -->
      <view class="summerimg">
        <image v-if="bannerlist8.length > 0 && bannerlist8[0].banner" style="width: 100%; height: 1050rpx;"
               :src="bannerlist8[0].banner" mode="aspectFill"/>
        <view style="display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          background-color: #299DFE;position: relative;top:-14rpx
         ">
          <view v-for="(item, index) in bannerlist7" :key="index">
            <image style="margin-bottom: 10rpx; width: 700rpx; height: 300rpx" v-if="item.banner"
                   :src="item.banner" @click="gogoods(item)"/>
          </view>
        </view>
      </view>

      <view class="category-two-section">
        <scroll-view scroll-x="true" class="horizontal-scroll">
          <view class="category-two-item" v-for="(it, idx) in paginatedCategories.flat().slice(2)" :key="idx"
                @tap="getGoods(it,idx)" :class="{ 'active': activeIndex === idx }">
            <view class="ct-text">{{ it.name }}</view>
          </view>
        </scroll-view>

        <!-- 改为简单的网格布局，避免瀑布流的复杂性 -->
        <view v-if="state.pagination.total > 0" class="goods-grid-container">
          <view class="goods-grid-item" v-for="item in state.pagination.data" :key="item.id"
                @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
            <s-goods-column
                class="goods-md-box"
                size="md"
                :data="item"
                :topRadius="10"
                :bottomRadius="10">
              <template v-slot:cart>
                <button class="ss-reset-button cart-btn"></button>
              </template>
            </s-goods-column>
          </view>
        </view>
      </view>
    </s-layout>
  </view>
</template>

<script setup>
import {
  computed,
  ref,
  reactive
} from "vue";
import {
  onLoad,
  onShow,
  onPullDownRefresh,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import sheep from "@/sheep";
import $share from "@/sheep/platform/share";
import * as useModal from "@/sheep/hooks/useModal";

//#ifdef H5
import weixin from "@/sheep/libs/sdk-h5-weixin";
//#endif

const state = reactive({
  currentTab: 0,
  pagination: {
    data: [],
    page: 1,
    total: 0,
    size: 20,
  },
  loadStatus: "",
  deleteOrderId: 0,
  error: 0,
  iconStatus: false, // 控制列表/网格视图切换
  leftGoodsList: [],
  rightGoodsList: [],
});
// 加载瀑布流所需变量
let count = 0;
const pageSize = 10;

const paginatedCaterings = computed(() => {
  const pages = [];
  for (let i = 0; i < cateringList.value.length; i += pageSize) {
    pages.push(cateringList.value.slice(i, i + pageSize));
  }
  return pages;
});

// 添加动态计算swiper高度的属性
const cateringSwiperHeight = computed(() => {
  // 如果数据为空，返回默认高度
  if (!paginatedCaterings.value || paginatedCaterings.value.length === 0) {
    return '400rpx';
  }

  // 获取第一页数据量
  const firstPageCount = paginatedCaterings.value[0].length;

  // 如果只有一排(≤5个)，使用较小高度；否则使用默认高度
  return firstPageCount <= 5 ? '200rpx' : '400rpx';
});

const cateringList = ref([]);

// 添加位置相关的响应式变量
const currentLocation = ref('黄冈'); // 默认显示黄冈

// 到店点餐相关数据
const currentDiningIndex = ref(0);
const restaurantList = ref([]);

const paginatedCategories = computed(() => {
  const pages = [];
  for (let i = 0; i < categoryList.value.length; i += pageSize) {
    pages.push(categoryList.value.slice(i, i + pageSize));
  }
  return pages;
});

const ADList = ref([]);
const categoryList = ref([]);
const categoryGoMenu = ref([]);

const gogoods = (item) => {
  sheep.$router.go(`/pages/goods/index?id=${item.productId}`);
};

const gogoods1 = (item) => {
  sheep.$router.go(`/pages/goods/index?id=${item.id}`);
};

// 瀑布流布局函数
function mountMasonry(height = 0, where = "left") {
  if (!state.pagination.data[count]) return;

  // 使用简单的奇偶分配方式
  if (count % 2 === 0) {
    state.leftGoodsList.push(state.pagination.data[count]);
  } else {
    state.rightGoodsList.push(state.pagination.data[count]);
  }
  count++;
}

function emptyList() {
  state.leftGoodsList = [];
  state.rightGoodsList = [];
  count = 0;
}

const goindexlist = (id) => {
  console.log(id);
  sheep.$router.go(`/pages/goods/secondindexlist?id=${id.id}`);
};

// 隐藏原生tabBar
uni.hideTabBar();

const template = computed(() => sheep.$store("app").template.home);
const barHeight = ref(0);

// 点击位置区域手动选择城市的函数
function handleLocationClick() {
  uni.navigateTo({
    url: '/pages/index/components/city-select'
  });
}

// 添加 onShow 生命周期钩子，当从城市选择页面返回时会触发
onShow(() => {
  // 检查是否有新选择的城市信息
  const savedCity = uni.getStorageSync('index-map');
  if (savedCity && savedCity.name !== currentLocation.value) {
    // 更新显示的城市
    currentLocation.value = savedCity.name;
    console.log('城市已更新:', savedCity.name);
  }
  
  // 每次显示页面时检查登录状态
  const isLogin = sheep.$store('user').isLogin;
  if (!isLogin) {
    console.log('用户未登录，准备弹出登录框');
  }
});

onLoad(async (options) => {
  // 第一步：初始化页面基础数据
  await getIndexPage();
  const statusBarHeight = sheep.$platform.device.statusBarHeight;
  barHeight.value = statusBarHeight + 54 + "px";
  init(options);
  
  // 第二步：加载餐厅列表
  await loadRestaurantList();
  
  // 第三步：检查登录状态
  await checkLoginStatus();
});

// 加载餐厅列表
async function loadRestaurantList() {
  try {
    console.log('开始加载餐厅列表...');
    const res = await sheep.$api.catering.getHomeRestaurantList();
    if (res.code === 200 && res.data && res.data.length > 0) {
      restaurantList.value = res.data;
      console.log('✅ 餐厅列表加载成功:', restaurantList.value.length, '个');
    // 检查每个餐厅是否有 ot 字段
    restaurantList.value.forEach(restaurant => {
      if (!restaurant.ot) {
        console.warn('⚠️ 餐厅缺少 ot 字段:', restaurant.name);
      }
    });
    } else {
      console.warn('餐厅列表为空或加载失败，使用默认数据');
      // 如果后端没有数据，使用默认数据
      restaurantList.value = [
        { id: 1, name: '肯德基', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/kfc.png', description: '美味炸鸡，全家共享', bgColor: '#e60012' },
        { id: 2, name: 'Tims', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/tims.png', description: '加拿大国民咖啡', bgColor: '#d72322' },
        { id: 3, name: '霸王茶姬', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/chaji.png', description: '新中式茶饮', bgColor: '#d8251e' },
        { id: 4, name: '喜茶', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/xicha.png', description: '灵感之茶', bgColor: '#c7a37a' },
        { id: 5, name: '奈雪的茶', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/naixue.png', description: '一杯好茶，一口软欧包', bgColor: '#7fbb24' }
      ];
    }
  } catch (error) {
    console.error('加载餐厅列表失败:', error);
    // 加载失败时使用默认数据
    restaurantList.value = [
      { id: 1, name: '肯德基', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/kfc.png', description: '美味炸鸡，全家共享', bgColor: '#e60012' },
      { id: 2, name: 'Tims', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/tims.png', description: '加拿大国民咖啡', bgColor: '#d72322' },
      { id: 3, name: '霸王茶姬', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/chaji.png', description: '新中式茶饮', bgColor: '#d8251e' },
      { id: 4, name: '喜茶', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/xicha.png', description: '灵感之茶', bgColor: '#c7a37a' },
      { id: 5, name: '奈雪的茶', logo: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/naixue.png', description: '一杯好茶，一口软欧包', bgColor: '#7fbb24' }
    ];
  }
}

// 检查登录状态并处理登录流程
async function checkLoginStatus() {
  console.log('========== 检查登录状态 ==========');
  
  const isLogin = sheep.$store('user').isLogin;
  console.log('当前登录状态:', isLogin);
  
  if (!isLogin) {
    console.log('用户未登录，弹出登录框');
    
    try {
      // 弹出登录框并等待登录完成
      await showLoginModal();
      console.log('✅ 登录成功，继续获取位置信息');
      
      // 登录成功后，延迟获取位置，避免弹窗冲突
      setTimeout(async () => {
        await getLocation();
      }, 500);
      
    } catch (error) {
      console.error('❌ 登录失败或取消:', error);
      // 即使登录失败，也获取位置信息（使用默认位置）
      setTimeout(async () => {
        await getLocation();
      }, 500);
    }
  } else {
    console.log('✅ 用户已登录，直接获取位置信息');
    // 已登录，直接获取位置
    try {
      await getLocation();
    } catch (e) {
      console.error('获取位置失败(已登录分支):', e);
    }
  }
  
  console.log('==================================');
}

// 显示登录弹窗
function showLoginModal() {
  return new Promise((resolve, reject) => {
    //#ifdef MP-WEIXIN
    // 微信小程序环境
    uni.showModal({
      title: '登录提示',
      content: '您还未登录，是否立即登录？',
      confirmText: '立即登录',
      cancelText: '稍后再说',
      success: async (res) => {
        if (res.confirm) {
          try {
            // 调用微信登录
            const loginRes = await useModal.userihuanggangLogin();
            console.log('微信登录成功:', loginRes);
            resolve(loginRes);
          } catch (error) {
            console.error('微信登录失败:', error);
            uni.showToast({
              title: '登录失败，请稍后重试',
              icon: 'none'
            });
            reject(error);
          }
        } else {
          console.log('用户取消登录');
          reject(new Error('用户取消登录'));
        }
      },
      fail: (error) => {
        console.error('弹窗显示失败:', error);
        reject(error);
      }
    });
    //#endif
    
    //#ifdef H5
    // H5环境 - 使用不同的登录方式
    useModal.showAuthModal('smsLogin');
    // H5登录成功后会自动更新store，这里延迟resolve
    setTimeout(() => {
      if (sheep.$store('user').isLogin) {
        resolve();
      } else {
        reject(new Error('登录取消'));
      }
    }, 1000);
    //#endif
  });
}

// 获取设备定位的函数
async function getLocation() {
  console.log('========== 开始获取位置信息 ==========');
  
  try {
    // 先获取城市列表（确保后续匹配使用）
    const cityListRes = await sheep.$api.catering.getCityList();
    if (cityListRes.code !== 200 || !cityListRes.data || !Array.isArray(cityListRes.data)) {
      throw new Error('获取城市列表失败');
    }
    const cityList = cityListRes.data;
    console.log('城市列表总数:', cityList.length);

    // H5 非 HTTPS 环境定位将失败：直接回退默认城市
    // #ifdef H5
    if (typeof window !== 'undefined') {
      const isHttps = window.location && window.location.protocol === 'https:';
      if (!isHttps) {
        console.warn('H5 非 HTTPS 环境，跳过定位，使用默认城市');
        const defaultCity = cityList.find(c => String(c.code || c.id) === '80' || (c.name || c.cityName) === '洛阳');
        if (defaultCity) {
          const cityId = defaultCity.code || defaultCity.id || defaultCity.cityId || defaultCity.cityCode;
          const cityName = defaultCity.name || defaultCity.cityName;
          currentLocation.value = cityName;
          uni.setStorageSync('index-map', { id: cityId, name: cityName });
          console.log('✅ H5使用默认城市:', cityName, 'ID:', cityId);
        }
        return;
      }
    }
    // #endif

    // 调用uni-app的定位API获取经纬度
    const locationRes = await new Promise((resolve, reject) => {
      let done = false;
      const timer = setTimeout(() => {
        if (!done) {
          reject(new Error('定位超时'));
        }
      }, 8000);
      uni.getLocation({
        type: 'gcj02',
        altitude: true,
        success: (res) => { done = true; clearTimeout(timer); resolve(res); },
        fail: (err) => { done = true; clearTimeout(timer); reject(err); }
      });
    });

    console.log('✅ 获取经纬度成功:', locationRes.latitude, locationRes.longitude);

    // 使用逆地理编码获取具体城市信息
    const geocodeRes = await new Promise((resolve, reject) => {
      uni.request({
        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${locationRes.latitude},${locationRes.longitude}&key=3UUBZ-USDKK-JI5JX-AJBOB-LNW7Q-DSFKC`,
        success: resolve,
        fail: reject
      });
    });

    // 解析逆地理编码结果，获取城市名
    let userCityName = '';
    if (geocodeRes.data && geocodeRes.data.result && geocodeRes.data.result.address_component) {
      userCityName = geocodeRes.data.result.address_component.city;
      console.log('✅ 逆地理解析城市名称:', userCityName);
    }

    // 从城市列表中匹配城市
    if (userCityName) {
      const cleanCityName = userCityName.replace(/[市区县自治州]/g, '').trim();
      const matchedCity = cityList.find(c => {
        const cityName = c.name || c.cityName || '';
        const cityNameClean = cityName.replace(/[市区县自治州]/g, '').trim();
        
        // 完全匹配 或 包含匹配
        return cityName === userCityName || 
               cityNameClean === cleanCityName || 
               cityName.includes(cleanCityName) ||
               cleanCityName.includes(cityNameClean);
      });

      if (matchedCity) {
        const cityId = matchedCity.code || matchedCity.id || matchedCity.cityId || matchedCity.cityCode;
        const cityName = matchedCity.name || matchedCity.cityName;
        currentLocation.value = cityName;
        uni.setStorageSync('index-map', {
          id: cityId,
          name: cityName
        });
        console.log('✅ 定位城市已匹配:', cityName, 'ID:', cityId);
      } else {
        console.warn('⚠️ 定位城市在列表中未找到:', userCityName, '使用默认城市');
        const defaultCity = cityList.find(c => String(c.code || c.id) === '80' || (c.name || c.cityName) === '洛阳');
        if (defaultCity) {
          const cityId = defaultCity.code || defaultCity.id || defaultCity.cityId || defaultCity.cityCode;
          const cityName = defaultCity.name || defaultCity.cityName;
          currentLocation.value = cityName;
          uni.setStorageSync('index-map', { id: cityId, name: cityName });
          console.log('✅ 使用默认城市:', cityName, 'ID:', cityId);
        }
      }
    }
    
    console.log('==================================');
  } catch (error) {
    console.error('❌ 获取位置失败:', error);
    
    // 尝试获取城市列表并存储默认城市
    try {
      const cityListRes = await sheep.$api.catering.getCityList();
      if (cityListRes.code === 200 && cityListRes.data && Array.isArray(cityListRes.data)) {
        const defaultCity = cityListRes.data.find(c => String(c.code || c.id) === '80' || (c.name || c.cityName) === '洛阳');
        if (defaultCity) {
          const cityId = defaultCity.code || defaultCity.id || defaultCity.cityId || defaultCity.cityCode;
          const cityName = defaultCity.name || defaultCity.cityName;
          currentLocation.value = cityName;
          uni.setStorageSync('index-map', {
            id: cityId,
            name: cityName
          });
          console.log('✅ 异常回退-已设置默认城市:', cityName, 'ID:', cityId);
        }
      }
    } catch (cityError) {
      console.error('❌ 获取城市列表失败:', cityError);
      currentLocation.value = '洛阳';
    }
    
    console.log('==================================');
  }
}

const bannerList = ref([]);

const bannerlist1 = ref([]);
const bannerlist2 = ref([]);
const bannerlist3 = ref([]);
const bannerlist4 = ref([]);
const bannerlist5 = ref([]);
const bannerlist6 = ref([]);
const bannerlist7 = ref([]);
const bannerlist8 = ref([]);

const getIndexPage = async () => {
  const res = await sheep.$api.pageIndex.indexPageList();

  // 按type分类数据
  if (res && Array.isArray(res)) {
    // 清空之前的数据
    bannerlist1.value = [];
    bannerlist2.value = [];
    bannerlist3.value = [];
    bannerlist4.value = [];
    bannerlist5.value = [];
    bannerlist6.value = [];
    bannerlist7.value = [];
    bannerlist8.value = [];

    // 遍历返回的数组，根据types分类
    res.forEach((item) => {
      if (item.types) {
        // 根据type将数据放入对应的数组
        switch (item.types) {
          case "1":
            bannerlist1.value.push(item);
            break;
          case "2":
            bannerlist2.value.push(item);
            break;
          case "3":
            bannerlist3.value.push(item);
            break;
          case "4":
            bannerlist4.value.push(item);
            break;
          case "5":
            bannerlist5.value.push(item);
            break;
          case "6":
            bannerlist6.value.push(item);
            break;
          case "7":
            bannerlist7.value.push(item);
            break;
          case "8":
            bannerlist8.value.push(item);
            break;
            // 可以根据需要添加更多case
          default:
            // 处理其他type或不做处理
            break;
        }
      }
    });

  }
};

async function getCategoryList() {
  const res = await sheep.$api.category.list();

  categoryList.value = [];
  categoryList.value = res.filter((item) => item.children?.length > 0);
}

async function getCateringList() {
  cateringList.value = await sheep.$api.catering.getCateringList();
}

function init(options) {
  sheep.$store("app").init();
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 800);
  // 开始登录
  categoryMoudle();
  getCategoryList();
  // getCateringList();
  carouselImageH5List();
  ADImageH5List();
  getList();
  getGoods();

  // 预览模板
  if (options.templateId) {
    sheep.$store("app").init(options.templateId);
  }

  // 解析分享信息
  if (options.spm) {
    $share.decryptSpm(options.spm);
  }

  // 进入指定页面(完整页面路径)
  if (options.page) {
    sheep.$router.go(decodeURIComponent(options.page));
  }

  //#ifdef H5
  setOpenShare();
  //#endif['']
}

onShareAppMessage((res) => {
  let shareData = {
    title: "邀请好友领取海量现金券!",
    desc: "我正在使用xxxApp，赶紧跟我一起来体验！",
    link: "https://mall.ichengle.top/uni/",
    imgUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
  };
  return {
    ...shareData,
  };
});

function toGoodsInfo(it) {
  console.log("toGoodsInfo", it);
  if (it.name === "电影") {
    sheep.$api.config.getConfigKey('movie.config').then(res => {
      console.log('configValue: ', res.msg);
      if (res.msg === 'lp') {
        sheep.$router.go("/pages/movie/index");
      } else if (res.msg === 'xk') {
        sheep.$router.go("/pages/xk-movie/index");
      }
    });
  } else if (it.name === "蛋糕") {
    sheep.$router.go("/pages/cake/index");
  } else {
    sheep.$router.go("/pages/goods/list", {
      categoryId: it.id
    });
  }
}

async function getGoods(it, idx) {
  activeIndex.value = idx;

  if (it === undefined) {
    it = {id: 156};
    activeIndex.value = 0; // 修正默认索引
  }

  state.loadStatus = "loading";

  let res = await sheep.$api.cake.getCakeProductList({
    categoryId: it.id,
    orderField: "sort",
    orderSort: "asc"
  }, {
    page: 0,
    size: state.pagination.size,
  });

  const {content, totalElements, totalPages} = res;

  // 直接更新数据，不使用瀑布流
  state.pagination.data = content || [];
  state.pagination.total = totalElements;
  state.pagination.page = 1;

  if (1 < totalPages) {
    state.loadStatus = "more";
  } else {
    state.loadStatus = "noMore";
  }
}

async function getList() {
  state.loadStatus = "loading";
  console.log("size:", state.pagination);
  let res = await sheep.$api.cake.getCakeProductList({
    orderField: "sort",
    orderSort: "desc"
  }, {
    page: state.pagination.page - 1,
    size: state.pagination.size,
  });
  const {
    content,
    totalElements,
    totalPages
  } = res;
  console.log(content);

  state.pagination.data = content;
  state.pagination.total = totalElements;
  if (state.pagination.page < totalPages) {
    state.loadStatus = "more";
  } else {
    state.loadStatus = "noMore";
  }
  // 重置列表并调用mountMasonry
  emptyList();
  if (state.pagination.data.length > 0) {
    mountMasonry();
  }

}

/**
 * 跳转点餐页面
 * @param item
 */
function toCateringInfo(item) {
  if (item.cateringName === "电影") {
    sheep.$api.config.getConfigKey('movie.config').then(res => {
      console.log('电影三方配置: ', res.msg);
      if (res.msg === 'lp') {
        sheep.$router.go("/pages/movie/index");
      } else if (res.msg === 'xk') {
        sheep.$router.go("/pages/xk-movie/index");
      }
    });
  } else if (item.cateringName === "蛋糕") {
    sheep.$router.go("/pages/cake/index");
  } else {
    sheep.$router.go("/pages/catering/index", {
      cateringName: item.cateringName,
      cateringType: item.cateringType
    });
  }
}

// 添加一个刷新标识
const refreshKey = ref(0);

// 下拉刷新
onPullDownRefresh(() => {
  sheep.$store("app").init();

  // 重新获取数据
  getCategoryList();
  carouselImageH5List();
  ADImageH5List();
  categoryMoudle();
  // getList();
  getGoods();
  // 触发商品列表刷新
  refreshKey.value++;
  uni.stopPullDownRefresh();

});
//#ifdef H5
// 微信h5分享；
function setOpenShare() {
  let shareData = {
    title: "邀请好友领取海量现金券!",
    desc: "我正在使用xxxApp，赶紧跟我一起来体验！",
    link: "https://mall.ichengle.top/uni/",
    imgUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
  };
  // console.log("更新分享", shareData);
  weixin.updateShareInfo(shareData);
}

//#endif

// 获取轮播图列表
function carouselImageH5List() {
  sheep.$api.pageIndex.carouselImageH5List().then((res) => {
    bannerList.value = res.content;
  });
}

function ADImageH5List() {
  sheep.$api.pageIndex.ADImageH5List().then((res) => {
    ADList.value = res.content;
  });
}

function categoryMoudle() {
  sheep.$api.pageIndex.categoryMoudle().then((res) => {
    categoryGoMenu.value = res;
  });
}

// 在现有的 ref 定义中添加
const activeIndex = ref(0); // 默认选中第三个（跳过前两个）

// 到店点餐相关方法
function onDiningSwiperChange(e) {
  currentDiningIndex.value = e.detail.current;
  console.log('当前选中餐厅索引:', currentDiningIndex.value);
}

async function goRestaurantDetail(item) {
  console.log('【首页】点击餐厅:', item.name, 'id:', item.id, 'ot:', item.ot);
  
  if (!item.ot && !item.id) {
    console.error('❌ 餐厅数据缺少 ot 或 id 字段:', item);
    uni.showToast({
      title: '餐厅数据错误，请联系管理员',
      icon: 'none'
    });
    return;
  }
  
  uni.showLoading({ title: '定位中...' });
  
  try {
    // 1. 先获取城市列表
    const cityListRes = await sheep.$api.catering.getCityList();
    if (cityListRes.code !== 200 || !cityListRes.data || !Array.isArray(cityListRes.data)) {
      throw new Error('获取城市列表失败');
    }
    
    const cityList = cityListRes.data;
    console.log('城市列表:', cityList);
    
    let cityId = null;
    let cityName = null;
    
    // 2. 尝试从本地存储获取已定位的城市信息
    let cityInfo = uni.getStorageSync('index-map');
    if (cityInfo && cityInfo.name) {
      console.log('本地存储的城市信息:', cityInfo);
      
      // 根据城市名称从城市列表中查找对应的城市ID
      const storedCityName = cityInfo.name.replace('市', '').replace('自治州', '').trim();
      const matchedCity = cityList.find(c => {
        const cityName = c.name || c.cityName || '';
        const cityNameClean = cityName.replace('市', '').replace('自治州', '').trim();
        
        // 完全匹配或包含匹配
        return cityName === cityInfo.name || 
               cityNameClean === storedCityName || 
               cityName.includes(storedCityName) ||
               storedCityName.includes(cityNameClean);
      });
      
      if (matchedCity) {
        cityId = matchedCity.code || matchedCity.id || matchedCity.cityId || matchedCity.cityCode;
        cityName = matchedCity.name || matchedCity.cityName;
        console.log('✅ 使用本地存储的城市:', cityName, 'ID:', cityId);
      } else {
        console.warn('❌ 本地城市在列表中未找到:', cityInfo.name);
      }
    }
    
    // 3. 如果本地没有城市信息，尝试重新定位
    if (!cityId) {
      // #ifdef H5
      const DEFAULT_CITY_ID = 80;
      const matchedCityH5 = cityList.find(c => {
        const values = [c.code, c.id, c.cityId, c.cityCode];
        return values.some(v => String(v) === String(DEFAULT_CITY_ID));
      });
      if (matchedCityH5) {
        cityId = DEFAULT_CITY_ID;
        cityName = matchedCityH5.name || matchedCityH5.cityName;
      } else {
        cityId = DEFAULT_CITY_ID;
        cityName = '洛阳';
      }
      console.log('H5使用默认城市ID:', cityId, cityName);
      uni.setStorageSync('index-map', { id: cityId, name: cityName || '' });
      // #endif

      // #ifndef H5
      console.log('本地无城市信息，开始定位...');
      try {
        // 获取微信定位
        const location = await new Promise((resolve, reject) => {
          uni.getLocation({
            type: 'gcj02',
            success: resolve,
            fail: reject,
            timeout: 5000
          });
        });
        
        console.log('定位成功:', location);
        
        // 调用腾讯地图逆地址解析获取城市名称
        const key = '3UUBZ-USDKK-JI5JX-AJBOB-LNW7Q-DSFKC';
        const mapRes = await new Promise((resolve, reject) => {
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${location.latitude},${location.longitude}&key=${key}`,
            success: resolve,
            fail: reject
          });
        });
        
        if (mapRes.data && mapRes.data.result && mapRes.data.result.address_component) {
          const userCityName = mapRes.data.result.address_component.city;
          console.log('逆地址解析获取的城市:', userCityName);
          console.log('城市列表样例:', cityList.slice(0, 3)); // 打印前3个城市查看数据结构
          
          // 从城市列表中匹配城市（去掉"市"字进行匹配）
          const cleanCityName = userCityName.replace('市', '').replace('自治州', '').trim();
          console.log('清理后的城市名:', cleanCityName);
          
          const matchedCity = cityList.find(c => {
            // 支持多种字段名：name/cityName
            const cityName = c.name || c.cityName || '';
            const cityNameClean = cityName.replace('市', '').replace('自治州', '').trim();
            
            // 多种匹配方式：
            // 1. 完全匹配
            if (cityName === userCityName || cityNameClean === cleanCityName) {
              return true;
            }
            // 2. 包含匹配（洛阳 包含在 洛阳市）
            if (cityName.includes(cleanCityName) || cleanCityName.includes(cityNameClean)) {
              return true;
            }
            // 3. 模糊匹配（去掉所有特殊字符）
            const pattern1 = cityName.replace(/[市区县自治州]/g, '');
            const pattern2 = cleanCityName.replace(/[市区县自治州]/g, '');
            if (pattern1 === pattern2) {
              return true;
            }
            return false;
          });
          
          if (matchedCity) {
            // 支持多种字段名：code/id/cityId/cityCode
            cityId = matchedCity.code || matchedCity.id || matchedCity.cityId || matchedCity.cityCode;
            cityName = matchedCity.name || matchedCity.cityName;
            
            console.log('✅ 定位匹配成功!');
            console.log('  - 定位城市:', userCityName);
            console.log('  - 匹配到:', cityName);
            console.log('  - 城市ID:', cityId);
            console.log('  - 完整数据:', matchedCity);
            
            // 保存到本地存储
            uni.setStorageSync('index-map', {
              id: cityId,
              name: cityName
            });
          } else {
            console.warn('❌ 定位的城市在列表中未找到:', userCityName);
            console.warn('可用城市列表前10个:', cityList.slice(0, 10).map(c => c.name || c.cityName));
          }
        }
      } catch (locationError) {
        console.error('定位失败:', locationError);
      }
      // #endif
    }
    
    // 4. 如果还是没有城市信息，使用默认城市（第一个城市）
    if (!cityId && cityList.length > 0) {
      const defaultCity = cityList[0];
      cityId = defaultCity.code || defaultCity.id;
      cityName = defaultCity.name;
      console.log('使用默认城市:', cityName, cityId);
      
      // 保存到本地存储
      uni.setStorageSync('index-map', {
        id: cityId,
        name: cityName
      });
    }
    
    uni.hideLoading();
    
    // 5. 最终检查
    if (!cityId) {
      uni.showToast({
        title: '无法获取城市信息',
        icon: 'none'
      });
      return;
    }
    
      console.log('最终跳转参数:', {
      restaurantId: item.id,
      cateringName: item.name,
      ot: item.ot || item.id,
      cityId: cityId,
      cityName: cityName
    });
    
    // 6. 保存餐厅信息（包含餐厅ID）
    const cateringStore = sheep.$store('catering');
    cateringStore.setStore({
      restaurantId: item.id,
      restaurantName: item.name,
      ot: item.ot || item.id
    });
    console.log('【首页】已保存餐厅信息，准备跳转到餐厅详情页');
    
    // 7. 跳转到门店列表页
    sheep.$router.go("/pages/catering/store-detail", {
      restaurantId: item.id,
      cateringName: item.name,
      ot: item.ot || item.id,
      cityId: cityId || 80,
      cityName: cityName || '洛阳',
      bgColor: item.bgColor
    });
    
  } catch (error) {
    uni.hideLoading();
    console.error('处理城市信息失败:', error);
    uni.showToast({
      title: '获取城市信息失败，请稍后重试',
      icon: 'none'
    });
  }
}

function goMoreRestaurants() {
  console.log('查看更多餐厅');
  uni.showToast({
    title: '更多餐厅敬请期待',
    icon: 'none'
  });
}
</script>

<style lang="scss" scoped>
pages {
  background-color: #d8d8d8;
}

// 搜索框样式
.search-box {
  margin-top: 130rpx;
  padding: 20rpx; // 调整 padding
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.search-container {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.left-section {
  display: flex;
  align-items: center;
  width: 80%;
  background-color: white;
  border-radius: 50rpx;
}

.location-wrapper {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  margin-right: 10rpx;
}

.search-input-wrapper {
  flex: 1;
}

.right-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 20%;
}

.top-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
  height: 60rpx;
  align-items: center;
}

.tab-buttons {
  display: flex;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 4rpx;

  .tab-btn {
    padding: 12rpx 30rpx;
    border-radius: 26rpx;
    color: #333333;
    font-size: 28rpx;
    transition: all 0.3s;

    &.active {
      background: #fe6c07;
      color: #fff;
      font-weight: bold;
    }
  }
}

// 轮播图样式 - 顶到页面顶部
.banner-content-box {
  width: 100%;

  .swiper-content {
    width: 100%;
  }

  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 分类区域
.category-section {
  background-color: #fff;
  position: relative;
  top: -16rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
}

// 广告区域
.ad-section {
  margin: 20rpx 0;
}

.see_ads {
  margin: 40rpx;
  text-align: center;
  color: red;
}

.dianziquan,
.gonghui {
  width: 80rpx !important;
  height: 80rpx !important;
  margin-top: 5rpx;
}

.shanghu,
.jifen {
  width: 60rpx !important;
  height: 60rpx !important;
  margin-top: 14rpx;
}

.btn-content {
  display: flex;
  justify-content: center;
}

.see-btn {
  width: 190rpx;
  height: 70rpx;
  font-size: 28rpx;
  border: 2rpx solid #dfdfdf;
  border-radius: 35rpx;
  font-weight: 400;
  color: #595959;
}

.goods-block {
  margin: 0 20rpx 10rpx 20rpx;
}

.icon-text {
  display: flex;
  justify-content: center;
  margin-bottom: 24rpx;

  .text-info {
    display: flex;
    align-items: center;
    width: 440rpx;

    .left {
      width: 108rpx;
      height: 2rpx;
      background: #d8d8d8;
    }

    .center {
      width: 128rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 44rpx;
      margin-left: 48rpx;
      margin-right: 48rpx;
    }

    .right {
      width: 108rpx;
      height: 2rpx;
      background: #d8d8d8;
    }
  }
}

// 服务保障模块样式
.service-guarantee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 20rpx;
  margin: 0 20rpx 0rpx 20rpx;
  border-radius: 20rpx;
}

.service-item {
  display: flex;
  align-items: center;
}

.service-icon {
  font-size: 24rpx;
  margin-right: 4rpx;
  margin-bottom: 4rpx;
}

.service-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.category-content {
  background-color: #fff;
  position: relative;
  top: -16rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .category-item {
    flex: 0 0 20%;
    margin-bottom: 25rpx;
    text-align: center;

    .ct-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }

    .ct-text {
      text-align: center;
      margin-top: 15rpx;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .max-item {
    flex: 0 0 20%;
    margin-bottom: 0;
  }
}

.catering-content {

  padding: 20rpx 20rpx 20rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  width: 100%;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;

  .catering-item {
    flex: 0 0 20%;
    text-align: center;
    margin-bottom: 25rpx;

    .ct-icon {
      width: 110rpx;
      height: 110rpx;
      border-radius: 15rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }
  }

  .max-item {
    flex: 0 0 20%;
    margin-bottom: 0;
  }
}

.msbox {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 24rpx;
  padding-top: 0;
}

.msitem {
  width: 48%;
  height: 420rpx;
  border-radius: 20rpx;
  background-color: #d8d8d8;
  position: relative;
  overflow: hidden;
}

.msitem2 {
  width: 48%;
  height: 420rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.msright {
  display: flex;
  flex-direction: column;
  height: 200rpx;
  background-color: #fe6c07;
  border-radius: 20rpx;
}

.msleft {
  width: 120rpx;
  text-align: center;
  color: #fff;
  position: absolute;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 20rpx;
  right: 0;
  background-color: #fe6c07;
  border-bottom-left-radius: 20rpx;
}

// 人气推荐模块样式
.popularbox {
  margin: 20rpx;
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 400rpx;
}

.popular-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.fire-icon {
  font-size: 40rpx;
  margin-right: 15rpx;
}

.popular-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-right: 20rpx;
}

.popular-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.popular-content {
  display: flex;
  z-index: 2;
  height: 360rpx;
  position: absolute;
  top: 80rpx;
  left: 200rpx;
  padding: 15rpx 120rpx;
  width: 100%;
  box-sizing: border-box;
}

.product-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16rpx;
  padding: 20rpx 0rpx 20rpx 0rpx;
  min-width: 200rpx;
  // margin-right: 20rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 180rpx;
}

.product-price {
  font-size: 32rpx;
  color: #ff6b35;
  font-weight: bold;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
}

.newbie-section {
  width: 167rpx;
}

.newbie-tag {
  background: linear-gradient(45deg, #ff6b35, #ff8a65);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.character-img {
  width: 120rpx;
  height: 120rpx;
  object-fit: contain;
}

.summerbox {
  width: 400rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 900;
  font-size: 30rpx;
  margin: 30rpx auto auto;
}

.sumleft {
  font-size: 20rpx;
  background-color: #ff6b35;
  padding: 8rpx 12rpx;
  color: #fff;
  border-radius: 20rpx;
}

.sumright {
  color: #ff6b35;
  border: 2rpx solid #ff6b35;
  box-sizing: border-box;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  margin-top: 4rpx;
}

.summerimg {
  // background-color: #29b6f6;
  margin-top: 30rpx;
  height: 100%;
}

.goodstatus {
  background: #f8f8f8;
  padding: 20rpx 0;
}

.scroll-view_H {
  width: 100%;
  white-space: nowrap;
  display: flex;
  overflow-x: auto;
  // overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.popular-content.scroll-view_H {
  width: 530rpx;
  padding: 10rpx 20rpx;
  /* 增加右侧padding */
  box-sizing: border-box;
}

.goodstatusitem {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.category-text {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  padding: 20rpx 30rpx;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease;
  display: inline-block;
}

.category-text.active {
  color: #ff6b35;
  font-weight: bold;
}

.divider {
  width: 2rpx;
  height: 30rpx;
  background-color: #e5e5e5;
  margin: 0 10rpx;
  flex-shrink: 0;
}

.category-text:hover {
  opacity: 0.8;
}


.category-two-section {
  background-color: #fff;
  padding: 10rpx 0;
  overflow-x: hidden;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.horizontal-scroll {
  padding: 0 15rpx;
  white-space: nowrap;
}

.category-two-item {
  display: inline-block;
  width: 140rpx;
  margin-right: 15rpx;
  text-align: center;
  padding: 12rpx 0;
  background-color: #f7f7f7;
  border-radius: 8rpx;

  .ct-icon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin: 0 auto;
  }

  .ct-text {
    margin-top: 8rpx;
    font-size: 26rpx;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.category-two-item.active {
  background-color: #ff6b35;
}

.category-two-item.active .ct-text {
  color: #fff;
}

.goods-list-box {
  width: 50%;
  box-sizing: border-box;
  padding: 0 10rpx;
}

.left-list,
.right-list {
  width: 100%;
}

.goods-grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 15rpx;
  gap: 15rpx;
}

.goods-grid-item {
  width: calc(50% - 10rpx);
  box-sizing: border-box;
}

.goods-md-box {
  width: 100%;
}

.list-toggle {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: #ff6b35;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 40rpx;
  z-index: 999;
}

.location-wrapper {
  cursor: pointer;
  padding: 8rpx 0;

  &:active {
    opacity: 0.7;
  }
}

// 到店点餐模块样式
.dining-section {
  margin: 30rpx 0;
  padding: 0 0 30rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 20rpx 30rpx;
}

.header-title {
  display: flex;
  align-items: center;
  
  .title-icon {
    font-size: 36rpx;
    margin-right: 12rpx;
  }
  
  .title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.header-more {
  display: flex;
  align-items: center;
  cursor: pointer;
  
  .more-text {
    font-size: 26rpx;
    color: #999;
    margin-right: 4rpx;
  }
  
  &:active {
    opacity: 0.7;
  }
}

.dining-swiper {
  width: 100%;
  height: 200rpx;
}

.dining-swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dining-card {
  width: 140rpx;
  height: 160rpx;
  border-radius: 16rpx;
  overflow: hidden;
  transition: transform 0.3s ease;
  transform: scale(0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
  box-sizing: border-box;

  &.active {
    transform: scale(1);
  }
}

.logo-wrapper {
  width: 80rpx;
  height: 80rpx;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.logo-image {
  width: 65rpx;
  height: 65rpx;
}

.card-name {
  font-size: 22rpx;
  color: #fff;
  font-weight: bold;
}

// 纯图片卡片，移除文本信息样式
</style>
